<template>
	<div v-show="showPage">
		<div style="border-bottom: 1px solid #ddd;">
			<h3>汇总报表配置</h3>
		</div>
		<div>
			<div>
				<div style="border-bottom: 1px solid #ddd;">
					<h3>维度(行)</h3>
				</div>
				<div style="margin-top: 10px;">
					<el-button type="primary" @click="onAddDimensionRowClickHandler" size="mini">增加</el-button>
					<el-table :data="dimensionRowList" style="width: 100%;" size="mini" border="true" stripe="true">
						<el-table-column label="动作">
							<template #default="scope">
								<el-button type="primary" @click="onDeleteDimensionRowClickHandler(scope.row)" size="mini">
									删除</el-button>
							</template>
						</el-table-column>
						<el-table-column label="字段">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.field" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldList" :key="item.columnName" :label="item.name"
										:value="item.columnName">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="字段附加信息">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.fieldExtra" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldExtraList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.aggregateType" placeholder="请选择" clearable
									filterable>
									<el-option v-for="item in aggregateTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div>
				<div style="border-bottom: 1px solid #ddd;">
					<h3>维度(列)</h3>
				</div>
				<div style="margin-top: 10px;">
					<el-button type="primary" @click="onAddDimensionColClickHandler" size="mini">增加</el-button>
					<el-table :data="dimensionColList" style="width: 100%;" size="mini" border="true" stripe="true">
						<el-table-column label="动作">
							<template #default="scope">
								<el-button type="primary" @click="onDeleteDimensionColClickHandler(scope.row)" size="mini">
									删除</el-button>
							</template>
						</el-table-column>
						<el-table-column label="字段">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.field" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldList" :key="item.columnName" :label="item.name"
										:value="item.columnName">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="字段附加信息">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.fieldExtra" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldExtraList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.aggregateType" placeholder="请选择" clearable
									filterable>
									<el-option v-for="item in aggregateTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div>
				<div style="border-bottom: 1px solid #ddd;">
					<h3>指标</h3>
				</div>
				<div style="margin-top: 10px;">
					<el-button type="primary" @click="onAddMeasureClickHandler" size="mini">增加</el-button>
					<el-table :data="measureList" style="width: 100%;" size="mini" border="true" stripe="true">
						<el-table-column label="动作">
							<template #default="scope">
								<el-button type="primary" @click="onDeleteMeasureClickHandler(scope.row)" size="mini">
									删除</el-button>
							</template>
						</el-table-column>
						<el-table-column label="字段">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.field" placeholder="请选择" clearable filterable>
									<el-option v-for="item in fieldList" :key="item.columnName" :label="item.name"
										:value="item.columnName">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<el-select size="mini" v-model="scope.row.aggregateType" placeholder="请选择" clearable
									filterable>
									<el-option v-for="item in aggregateTypeList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>	
</template>

<script>
	import shareData from '@/utils/shareData.js';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "SummaryReportConfigPage",
		props: ["scope"],
		data() {
			return {
				showPage: false,
				fieldList:[],
				tableName:"",
				dimensionRowList:[],
				dimensionColList:[],
				measureList:[],
				aggregateTypeList:[],
				fieldExtraList:[]
			}
		},mounted() {
			this.aggregateTypeList=shareData.aggregateTypeList;
			this.fieldExtraList=shareData.fieldExtraList;
		},methods: {
			init(){
				var that = this;
				restUtil.getAction(this,"summaryreportdesigner/initSummaryReportConfigPage?tableName="+this.tableName+"&code="+this.scope["code"]).then(
					function(response) {
						if (response.data.code == 1) {
							that.fieldList = response.data.fieldList;
							if(response.data.dimensionRowList!=null){
								that.dimensionRowList=response.data.dimensionRowList;
								that.dimensionColList=response.data.dimensionColList;
								that.measureList=response.data.measureList;
							}
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			setVisible(visible) {
				this.showPage=visible;
				if(visible){
					var tableName=this.scope["dataSourceConfigPage"]["tableName"];
					if(this.tableName!=tableName){
						this.tableName=tableName;
						this.init();
					}
				}
			},getReturnData(){
				var data={"dimensionRowList":this.dimensionRowList,"dimensionColList":this.dimensionColList,
				"measureList":this.measureList};
				return data;
			},getPreviousPage(){
				return "dataSourceConfigPage";
			},getNextPage(){
				return "summaryReportPreviewPage";
			},isCompletedPage(){
				return false;
			},onAddDimensionRowClickHandler() {
				var dimension = {
					"field": "",
					"aggregateType": ""
				};
				this.dimensionRowList.push(dimension);
			},onAddDimensionColClickHandler() {
				var dimension = {
					"field": "",
					"aggregateType": "",
					"fieldExtra":""
				};
				this.dimensionColList.push(dimension);
			},onAddMeasureClickHandler() {
				var measure = {
					"field": "",
					"aggregateType": "",
					"fieldExtra":""
				};
				this.measureList.push(measure);
			},onDeleteDimensionRowClickHandler(row){
				for(var i=0;i<this.dimensionRowList.length;i++){
					if(this.dimensionRowList[i].field==row.field){
						this.dimensionRowList.splice(i,1);
					}
				}
			},onDeleteDimensionColClickHandler(row){
				for(var i=0;i<this.dimensionColList.length;i++){
					if(this.dimensionColList[i].field==row.field){
						this.dimensionColList.splice(i,1);
					}
				}
			},onDeleteMeasureClickHandler(row){
				for(var i=0;i<this.measureList.length;i++){
					if(this.measureList[i].field==row.field){
						this.measureList.splice(i,1);
					}
				}
			}
		},
	}
</script>

<style>
</style>
